﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>生意参谋大数据可视化</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>

<body>
   <div class="head">
        <h1><img src="images/logo.png">阳哥参谋数据可视化</h1>
        <div class="weather"><img src="images/weather.png"><span>晴天</span><span class="current">2017-12-30</span></div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 250px">
                    <div class="alltitle">生意参谋</div>
                    <div class="sycm">
                        <ul class="clearfix">
                            <li>
                                <h2>1824</h2><span>今日销售额</span>
                            </li>
                            <li>
                                <h2>1920</h2><span>昨日销售额</span>
                            </li>
                            <li>
                                <h2>19%</h2><span>环比增长</span>
                            </li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li>
                                <h2>1824</h2><span>今日销售额</span>
                            </li>
                            <li>
                                <h2>1920</h2><span>昨日销售额</span>
                            </li>
                            <li>
                                <h2>19%</h2><span>环比增长</span>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 250px">
                    <div class="alltitle">消费占比</div>
                    <div class="sy" id="echarts1"></div>
                    <div class="sy" id="echarts2"></div>
                    <div class="sy" id="echarts3"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height:250px">
                    <div class="alltitle">行业区分比例</div>
                    <div id="echarts4" style="height: 180px; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">12581189</li>
                            <li class="pulll_left counter">3912410</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">消费总金额</li>
                            <li class="pulll_left">消费总笔数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height: 450px">
                    <div class="alltitle">新增会员信息</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <li><a class="active" href="#">7天</a></li>
                            <li><a href="#">15天</a></li>
                            <li><a href="#">30天</a></li>
                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>今日新增会员列表</span></div>
                        <div class="adduser">
                            <ul class="clearfix">
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="images/head.jpg">1今日新增会员列表</span> <span class="pulll_right">24岁 - 女 -
                                        广州 </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="images/head.jpg">2今日新增会员列表</span> <span class="pulll_right">24岁 - 女 -
                                        广州 </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="images/head.jpg">3今日新增会员列表</span> <span class="pulll_right">24岁 - 女 -
                                        广州 </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><img
                                            src="images/head.jpg">4今日新增会员列表</span> <span class="pulll_right">24岁 - 女 -
                                        广州 </span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 250px">
                    <div class="alltitle">实时消费记录</div>
                    <div class="wrap">
                        <ul>
                            <li>
                                <p>刘帅-支付宝支付-120元-XXX门店</p>
                            </li>
                            <li>
                                <p>刘帅*-支付宝支付-120元-XXX门店</p>
                            </li>
                            <li>
                                <p>季博昌-支付宝支付-120元-XXX门店</p>
                            </li>
                            <li>
                                <p>要哈成-支付宝支付-120元-XXX门店</p>
                            </li>
                            <li>
                                <p>景冈次郎-支付宝支付-120元-XXX门店</p>
                            </li>
                            <li>
                                <p>瓢国唱-支付宝支付-120元-XXX门店</p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>
<!-- wrap下的ul元素的自动滚动 -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // 获取.wrap下的ul元素
            var wrapUl = document.querySelector('.wrap ul');
            var html = wrapUl.innerHTML;
            wrapUl.innerHTML += html; // 追加内容
    
            var ls = wrapUl.getElementsByTagName('li').length / 2 + 1;
            var i = 0;
    
            var intervalId = setInterval(function () {
                i++;
                if (i == ls) {
                    i = 1;
                    wrapUl.style.marginTop = "0px";
                    setTimeout(function () {
                        // 假设1rem = 16px
                        wrapUl.style.marginTop = -(i * 0.52 * 20) + 'px';
                    }, 10); // 延迟10ms开始动画
                } else {
                    // 假设1rem = 16px
                    wrapUl.style.marginTop = -(i * 0.52 * 20) + 'px';
                }
            }, 2400);
    
            // 获取.adduser下的ul元素
            var addUserUl = document.querySelector('.adduser ul');
            var html2 = addUserUl.innerHTML;
            addUserUl.innerHTML += html2; // 追加内容
    
            var ls2 = addUserUl.getElementsByTagName('li').length / 2 + 1;
            var a = 0;
    
            var intervalId2 = setInterval(function () {
                a++;
                if (a == ls2) {
                    a = 1;
                    addUserUl.style.marginTop = "0px";
                    setTimeout(function () {
                        // 假设1rem = 16px
                        addUserUl.style.marginTop = -(a * 0.5 * 16) + 'px';
                    }, 10); // 延迟10ms开始动画
                } else {
                    // 假设1rem = 16px
                    addUserUl.style.marginTop = -(a * 0.5 * 16) + 'px';
                }
            }, 4300);
        });
    </script>
    <!-- 初始化echarts图标实例 -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            // 假设 myChart1, myChart2, myChart3, myChart6, myChart7, myChart8 是已经初始化的图表实例
            // 你需要确保这些图表实例在 DOMContentLoaded 事件触发之前已经被创建
            function resizeCharts() {
                myChart1.resize();
                myChart2.resize();
                myChart3.resize();
                myChart6.resize();
                myChart7.resize();
                myChart8.resize();
            }

            resizeCharts(); // 页面加载完成后，立即调整图表大小
            window.addEventListener('resize', resizeCharts); // 窗口大小变化时，调整图表大小
        });
    </script>
    <!-- 新增会员信息 -->
    <script type="text/javascript">
        var v0 = 1000;
        var v1 = 353;
        var v2 = 178;
        var v3 = 68;

        var myChart6 = echarts.init(document.getElementById('echarts6'));
        var option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '新增会员',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                {
                    value: v0,
                    name: '老会员',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };

        var myChart7 = echarts.init(document.getElementById('echarts7'));
        var option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '新增领卡会员',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                {
                    value: v0,
                    name: '总领卡会员',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };

        var myChart8 = echarts.init(document.getElementById('echarts8'));
        var option8 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v3,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v3 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);
    </script>

    <!-- 消费占比 -->
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var v1 = 298;
        var v2 = 523;
        var v3 = v1 + v2;
        var option1 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '平均单客价',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }]
            }]
        };

        var myChart3 = echarts.init(document.getElementById('echarts3'));
        var option2 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };

        var myChart2 = echarts.init(document.getElementById('echarts2'));
        var option3 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }, 500);
    </script>

  <!-- 行业区分比例代码块 -->
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('echarts4'));
    var plantCap = [{
        name: '工业',
        value: '222'
    }, {
        name: '农业',
        value: '115'
    }, {
        name: '互联网',
        value: '113'
    }, {
        name: '医疗',
        value: '95'
    }, {
        name: '文学',
        value: '92'
    }, {
        name: '服装',
        value: '87'
    }];
    var datalist = [{
        offset: [56, 48],
        symbolSize: 110,
        color: 'rgba(73,188,247,.14)',
    }, {
        offset: [30, 70],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [0, 43],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [93, 30],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [26, 19],
        symbolSize: 65,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [75, 75],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    }];
    var datas = [];
    for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
                normal: {
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: itemToStyle.color,
                    opacity: itemToStyle.opacity
                }
            },
        })
    }
    var option = {
        grid: {
            show: false,
            top: 10,
            bottom: 10
        },
        xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
        }],
        yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
        }],
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#FFF',
                    textStyle: {
                        fontSize: '30'
                    }
                },
            },
            itemStyle: {
                normal: {
                    color: '#F30'
                }
            },
            data: datas
        }]
    };
    myChart.setOption(option);

    document.addEventListener('DOMContentLoaded', function () {
        myChart.resize();
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>

<!-- 数字滚动插件代码块 -->
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript">
    $('.counter').countUp();

    function currentFn() {
        let current = document.querySelector(".current");
        // 创建一个 Date 对象
        var today = new Date();

        // 获取年、月、日、时、分、秒
        var year = today.getFullYear();
        var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
        var day = today.getDate();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();

        // 使用模板字符串格式化输出
        var formattedTime = `${year}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day }`;

        console.log(formattedTime);
        current.innerHTML = formattedTime;
        console.log(current.innerHTML);
    }

    // 每1000毫秒（1秒）更新一次时间
    setInterval(currentFn(), 10000);

</script>
</body>

</html>